<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref, provide } from "vue"
import { storeToRefs } from "pinia";
import userChartShowState from "../../../store/chartExample";
import { requestLastWeekSongList, requestUserSongList } from "../../../utils/axiosURL";
import useSongURLStore from "../../../store/songURL";

const songURLStore = useSongURLStore()
const { state, listenCount, userID } = storeToRefs(userChartShowState())
const route = useRoute()
const userIDs = ref<any>(route.query.id)
// 存储用户歌单数据
let userListenCount = reactive<any>([])
// noAuthority 无权限
let noAuthority = ref<boolean>(false)
// noAuthority2 无权限

let noAuthority2 = ref<number>(0)
// 用户无数据
let userNoData = ref<boolean>(false)
// 存储近一周数据
let lastWeekData = reactive<any>([])
provide("songData", userListenCount.values)

// 用户歌单数据
const requestUserSongListFn = () => {
  requestUserSongList(userIDs.value).then((data: any) => {
    if (!data.playlist.length) return noAuthority.value = true
    userListenCount.values = data.playlist
  }).catch(_ => { })
}
// 用户最近一周的听歌排行
const requestLastWeekSongListFn = () => {
  requestLastWeekSongList(userID.value, 1).then((data: any) => {
    if (!data.weekData.length) return userNoData.value = true
    lastWeekData.values = data.weekData.slice(0, 10).map((item: any) => item = { ...item, ...item.song })
    songURLStore.initPlayList(data.weekData.map((item: any) => item = { ...item, ...item.song }))
    localStorage.setItem("playList", JSON.stringify(data.weekData.map((item: any) => item = { ...item, ...item.song })))
  }).catch(err => { noAuthority2.value = -2 })
}

onMounted(() => {
  requestUserSongListFn()
  requestLastWeekSongListFn()
})
</script>

<template>
  <div class="createSongListWrap">
    <div class="noSongList" v-if="noAuthority">用户暂无创建的歌单</div>
    <div class="listWrap" v-else-if="userListenCount.values.length !== 0">
      <div class="bigChartModelWrap" v-if="state === 0">
        <createSongListItem v-for="item in userListenCount.values" :id="item.id" :picUrl="item.coverImgUrl"
          :name="item.name" :trackCount="item.trackCount" />
      </div>
      <div class="ListModel" v-else-if="state === 1">
        <ListModelItem v-for="item in userListenCount.values" :id="item.id" :picUrl="item.coverImgUrl" :name="item.name"
          :trackCount="item.trackCount" :playCount="item.playCount" :subscribedCount="item.subscribedCount"
          :creator="item.creator.nickname" :userId="item.creator.userId" />
      </div>
      <div class="legend" v-else>
        <legendItems v-for="item in userListenCount.values" :id="item.id" :name="item.name"
          :picUrl="item.coverImgUrl" />
      </div>
    </div>
    <div v-else class="bigChartModel">
      <playListIntroduceSkeleton v-for="item in 10" />
    </div>
  </div>

</template>

<style lang="scss" scoped>
.createSongListWrap {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .listWrap {
    width: 100%;
    padding-bottom: 100px;

    .bigChartModelWrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-left: 25px;
      box-sizing: border-box;

      // 歌单的每一项
      .songItem {
        position: relative;
        width: 18%;
        margin-right: 15px;

        .imgWrap {
          position: relative;
          overflow: hidden;
          background-color: rgb(48, 48, 46);
          border-radius: 4px;


          .itemBkImg {
            width: 100%;
            height: 100%;
            max-height: 211px;
            border-radius: $borderRadius8;
            transform: scale(0.7);
          }

          .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: 1s;

            img {
              position: absolute;
              top: 1px;
              right: 0;
              bottom: 0;
              left: 3px;
              margin: auto;
              width: 24px;
              height: 24px;
            }
          }

          &:hover .topInfomation {
            transform: translateY(0%);
          }

          &:hover .playBtn {
            opacity: 1;
          }
        }

        .songListDesc {
          font-family: $textFont;
          font-size: $font-size-sm;
          line-height: 20px;
        }
      }
    }

    .ListModel {
      width: 100%;

      .listModeItem {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;

        .leftWrap {
          display: flex;
          align-items: center;
          width: 50%;
          height: 100%;
          padding-left: 25px;
          box-sizing: border-box;

          .imgWraps {
            position: relative;
            width: 65px;
            height: 65px;
            border-radius: 8px;
            background-color: #000;

            img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
              width: 60%;
              height: 60%;
            }
          }

          .songText {
            margin-left: 10px;
            font-size: $font-size-sm;
            font-family: $textFont;
            color: $font_main_color;
          }
        }

        .rightWrap {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: $font-size-xs;
          color: $font_second_color;
        }

        &:nth-child(odd) {
          background-color: rgb(250, 250, 250);
        }

        &:hover {
          background-color: rgb(241, 242, 243);
        }
      }
    }

    .legend {
      width: 100%;

      .legendItem {
        display: flex;
        width: 100%;
        margin-top: 30px;

        .leftWrapImg {
          position: relative;
          width: 180px;
          height: 180px;
          margin-left: 25px;
          border-radius: 6px;
          overflow: hidden;
          background-color: #99a9bf;

          img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 60%;
            height: 60%;
          }
        }

        .rightWrapList {
          flex: 1;
          margin-left: 60px;

          .listenMusicTop {
            font-size: $font-size-md;
            font-family: $activeTextFont;
          }

          .viewMore {
            width: 100%;
            margin-right: 10px;
            line-height: 30px;
            text-align: right;
            padding-right: 30px;
            box-sizing: border-box;
            font-size: $font-size-xs;
            font-family: $activeTextFont;
            color: $font_second_color;
          }
        }
      }
    }
  }
}

.noSongList {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-family: $activeTextFont;
  font-size: $font-size-lg2;
}

:deep(.el-skeleton) {
  margin: 0 15px 0 0;
}

.imgWrap {
  background-color: red;
}

// 歌单图片响应式设置
@media screen and (min-width: 1100px) {
  .imgWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .imgWrap {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .imgWrap {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .imgWrap {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .imgWrap {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .imgWrap {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .imgWrap {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .imgWrap {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .imgWrap {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .imgWrap {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .imgWrap {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .imgWrap {
    height: 210px !important;
    background-color: red;
  }
}
</style>
